<template>
  <a-card>
    <div class="">
      <a-space style="margin-bottom: 10px">
        <a-button :type="read==null?'primary':'dashed'" @click="getData(null)">所有留言</a-button>
        <a-button :type="read===false ? 'primary':'dashed'" @click="getData(false)">已读留言</a-button>
        <a-button :type="read? 'primary':'dashed'" @click="getData(true)">未读留言</a-button>
        <div style="margin-left: 30px;">
          <a-space>
            <span><a-tooltip content="输入账号,手机号">关健词<component is="icon-question-circle"/></a-tooltip>:</span>
            <a-input-search v-model="kewWords" :style="{width:'320px'}" placeholder="输入账号,手机号" search-button
                            @search="seaData()"/>
          </a-space>
        </div>
      </a-space>
    </div>
    <a-table :data="listData" :pagination="{pageSize:15}">
      <template #columns>
        <a-table-column v-for="(item,i) of columns" :title="item.title" :data-index="item.dataIndex" :key="i++">
          <template v-if="item.title==='序号'" #cell="{ rowIndex}">
            {{ rowIndex + 1 }}
          </template>
          <template v-if="item.title==='留言时间'" #cell="{ record }">
            <a-tag> {{ moment(record["CreateTime"]).format("YYYY-MM-DD HH:mm:ss") }}</a-tag>
          </template>
          <template v-if="item.title==='是否查看'" #cell="{ record }">
            <a-badge :count="Number(record['GuestbookRead'])" dot :dotStyle="{ width: '8px', height: '8px' }">
              <a-tag>{{ Number(record["GuestbookRead"]) > 0 ? "未读" : "已读" }}</a-tag>
            </a-badge>
          </template>
        </a-table-column>
        <a-table-column title="操作">
          <template #cell="{ record,rowIndex }">
            <a-space>
              <a @click="viewData(record)">查看</a>
              <a-popconfirm :content="`确诊删除 ${record['GuestbookUser']} 的留言?`" @ok="delData(record)" okText="删除"
                            cancelText="取消">
                <a>删除</a>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-card>
  <a-modal title="查看留言" :width="800" v-model:visible="boolData.isShow" :footer="null"
           @cancel="boolData.isShow===false">
    <a-form :model="addValue" auto-label-width>
      <a-form-item label="检测项目">
        <a-input v-model="addValue.GuestbookPro" placeholder="检测项目" style="width: 200px"/>
      </a-form-item>
      <a-form-item label="称呼">
        <a-input v-model="addValue.GuestbookName" placeholder="称呼" style="width: 200px"/>
      </a-form-item>
      <a-form-item label="电话">
        <a-input v-model="addValue.GuestbookPhone" placeholder="电话"/>
      </a-form-item>
      <a-form-item label="邮箱">
        <a-input v-model="addValue.GuestbookMail" placeholder="邮箱"/>
      </a-form-item>
      <a-form-item label="行业">
        <a-input v-model="addValue.GuestbookCompany" placeholder="行业"/>
      </a-form-item>
      <a-form-item label="留言内容">
        <a-textarea v-model="addValue.GuestbookDes" placeholder="留言内容"/>
      </a-form-item>
      <a-form-item label="留言时间">
        <a-input v-model="addValue.CreateTime" placeholder="留言时间"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import moment from "moment";

export default {
  name: "guestbook",
  data() {
    return {
      columns: [
        {
          title: "序号",
          key: "序号",
          dataIndex: "序号",
        },
        {
          title: "称呼",
          dataIndex: "GuestbookName",
        },
        {
          title: "电话",
          dataIndex: "GuestbookPhone",
        },
        {
          title: "行业",
          dataIndex: "GuestbookCompany",
        },
        {
          title: "留言时间",
          dataIndex: "",
        },
        {
          title: "是否查看",
          dataIndex: "GuestbookRead",
        },
      ],
      listData: [], moment,
      userSoftData: [],
      boolData: {
        isShow: false,
        isImgShow: false,
        isUserInfo: false,
        isExport: false,
      },
      importObj: [moment().add(-30, "days").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
      addValue: {
        GuestbookUser: "",
        GuestbookName: "",
        GuestbookPhone: "",
        GuestbookMail: "",
        GuestbookRead: "",
        GuestbookDes: "",
        GuestbookImg: "",
        GuestbookCompany: "",
        CreateTime: "",
      },
      imgList: [],
      imgShowValue: "",
      kewWords: "",
      read: null,
      userInfo: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData(read) {
      this.read = read;
      const res = await this.$Http.guestbook();
      if (res["Data"]) {
        if (read != null) {
          this.listData = [];
          res["Data"].forEach(d => {
            if (d.GuestbookRead === read) {
              this.listData.push(d);
            }
          });
        } else {
          this.listData = res["Data"];
        }
      }
    },
    async seaData() {
      this.read = "3";
      const res = await this.$Http.guestbook({KeyWords: this.kewWords});
      this.listData = res["Data"];
    },
    viewData(data) {
      this.boolData.isShow = true;
      this.addValue = data;
      this.sysRead(data);
    },
    async sysRead(data) {
      data.GuestbookRead = false;
      await this.$Http.guestbookEdit(data);
      await this.getData();
    },
    async delData(data) {
      await this.$Http.guestbookDel({GuestbookId: data["GuestbookId"]});
      this.$message.success("删除成功!");
      await this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
a {
  cursor: pointer;
}

.list {
  display: flex;
  justify-content: start;

  p {
    padding: 10px;
  }
}

.userInfoStyle {
  display: flex;
  flex-wrap: wrap;

  > div {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 50%;

    span {
      text-indent: 1em;
      font-weight: bold;
    }
  }
}
</style>
